<template>
  <div class="page-index">
    <div class="flex-between">
      <div>
        <div class="title">我未曾见过一个早起、勤奋，谨慎，诚实的人抱怨命运不公；</div>
        <div class="title">我也未曾见过一个认真负责、努力好学、心胸开阔的年轻人，会一直没有机会的。</div>
      </div>
      <div class="link mr32 f16 fwb learn" @click="handleLearn">学习文档推荐</div>
    </div>
    <div>
      <el-calendar v-model="calendar" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const calendar = ref('')
const handleLearn = () => {
    window.open('https://wonderful-code.gitee.io/guide/learnDoc.html#%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E6%96%87%E6%A1%A3', '_blank')
}
</script>

<style lang="less" scoped>
.page-index {
  .title {
    width: auto;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 1px;
  }
  .learn {
    color: rgba(6, 51, 116, 0.6);
  }
}
</style>
